<template>
<view class="wraper">
	<!-- <web-view src="http://whiteboards.easemob.com/"/> -->
	<scroll-view style="height:860rpx" scroll-y="true">
		<view class="infoConnecting">
			推流地址
		</view>
		<view>
			<input :value="url" class="urlInput" type="text" placeholder="推流地址" @input="bindUsername"></input>
		</view>
		<live-pusher :url="pubUrl" mode="RTC" aspect="9:16" :max-bitrate="300" :enable-camera="enableCamera" :muted="muted" background-mute="true" orientation="vertical">
		</live-pusher>

	</scroll-view>


	<view class="controlContent">
		<view class="emediaContrContent">

			<view class="controlItem" @tap="toggleMuted" :style="'color: ' + micphoneColor">
				<image class="icon-record" :src="'../../images/' + micphoneIcon + '@2x.png'" style="width:22px; height: 24px"></image>
				麦克风</view>
			<view class="controlItem" @tap="togglePlay" :style="'color: ' + videoColor">
				<image class="icon-record" :src="'../../images/' + videoIcon + '@2x.png'" style="width:22px; height: 24px"></image>
				视频</view>

		</view>

		<view class="hangup">
			<button type="primary" @tap="start">开始</button>
			<button type="warn" @tap="stop">结束</button>
		</view>
	</view>

</view>
</template>

<script>

export default {
  data() {
    return {
      videoIcon: 'video_white',
      micphoneIcon: 'micphone_white',
      micphoneColor: '#fff',
      videoColor: '#fff',
      url: '',
      pubUrl: '',
      enableCamera: true,
      muted: false
    };
  },

  components: {},
  props: {},

  onLoad() {
    console.log(2);
    var me = this;
    uni.getStorage({
      key: 'url',

      success(res) {
        console.log(res.data);
        me.setData({
          url: res.data
        });
      }

    });
    this.LivePusherContext = uni.createLivePusherContext();
  },

  onUnload() {
    uni.setStorage({
      key: "url",
      data: this.url
    });
  },

  onHide() {
    uni.setStorage({
      key: "url",
      data: this.url
    });
  },

  methods: {
    bindUsername: function (e) {
      this.setData({
        url: e.detail.value
      });
    },

    togglePlay() {
      let me = this;
      console.log("%c togglePlay", "color:green");
      this.setData({
        enableCamera: !me.enableCamera,
        pubUrl: me.pubUrl,
        videoIcon: this.videoIcon == 'video_white' ? 'video_gray' : 'video_white',
        videoColor: this.videoColor == '#fff' ? '#aaa' : '#fff'
      });
    },

    toggleMuted() {
      console.log("%c toggleMuted", "color:green");
      this.setData({
        muted: !this.muted,
        micphoneIcon: this.micphoneIcon == 'micphone_white' ? 'micphone_gray' : 'micphone_white',
        micphoneColor: this.micphoneColor == '#fff' ? '#aaa' : '#fff'
      });
    },

    start() {
      console.log('url', this.url);
      var me = this;
      this.setData({
        pubUrl: me.url || 'https://domain/push_stream'
      });
      uni.setStorage({
        key: "url",
        data: this.url
      });
      this.LivePusherContext.start();
      console.log(this.pubUrl);
    },

    stop() {
      // this.setData({
      // 	pubUrl: ''
      // })
      this.LivePusherContext.stop();
    }

  }
};
</script>
<style>
@import "./test.css";
</style>